<script setup>
import {TresCanvas} from "@tresjs/core";
import {OrbitControls} from "@tresjs/cientos";
import {BasicShadowMap, NoToneMapping, SRGBColorSpace} from "three";

const gl={
  clearColor:"#202020",
  alpha:false,
  shadows:true,
  shadowMapType:BasicShadowMap,
  outputColorSpace:SRGBColorSpace,
  toneMapping:NoToneMapping
}

const onClick=(event)=>{
  console.log(event)
  // event.object.material.color.set('#008080')
}
const onPointerEnter = (event)=>{
  event.object.material.color.set('#008080')
  event.object.scale.set(1.1,1.1,1.1)
}
const onPointLeave = (event)=>{
  event.object.material.color.set('#efefef')
  event.object.scale.set(1,1,1)
}

</script>

<template>
  <TresCanvas v-bind="gl" window-size>
    <TresPerspectiveCamera :position="[8, 5, 5]" :fov="90" />

<!--    <TresPerspectiveCamera :position="[0, 0, 15]" :fov="70" />-->
    <OrbitControls/>
    <template v-for="x in [-2.5,0,2.5]" >
      <template v-for="y in [-2.5,0,2.5]" >
        <TresMesh v-for="z in [-2.5,0,2.5]" :key="[x,y,z]" :position="[x,y,z]"
                  @click="onClick" @pointer-enter="onPointerEnter" @pointer-leave="onPointLeave">
          <TresBoxGeometry :args="[1,1,1]"/>
          <TresMeshToonMaterial color="#efefef"/>
        </TresMesh>
      </template>
    </template>
    <TresDirectionalLight :intensity="1"/>
    <TresAmbientLight :intensity="1"/>

  </TresCanvas>

</template>

<style scoped>

</style>